<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-24 10:58:31
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-29 14:14:48
-->
<template>
  <Dialog
    :title="props.editId ? '修改':'新增'"
    @handle-confirm="handleConfirm"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
    :confirm-disabled="!apiResourceInfo.name"
  >
    <AppTabs
      type="card"
      :tabs="tabsSetting"
      v-model:activeTabId="activeTabId"
    >
      <template #apiResourceInfo>
        <apiResourceInfoForm
          :type="props.editId ? 'edit':'add'"
          v-model="apiResourceInfo"
        />
      </template>
      <template #claimTypes>
        <setClaimTypeForm v-model:activate="claimTypeList" />
      </template>
      <template #setPropertiesForm>
        <setPropertiesForm v-model:properties="properties" />
      </template>
      <template #setSecretsForm>
        <setSecretsForm v-model:secrets="secrets" />
      </template>
    </AppTabs>
  </Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import Dialog from '@/components/Dialog/index.vue'
import AppTabs from '@/components/AppTabs/index.vue'
import apiResourceInfoForm from './apiResourceInfoForm.vue'
import setClaimTypeForm from '@/views/system/identityServer/components/setClaimTypeForm.vue'
import setPropertiesForm from '@/views/system/identityServer/components/setPropertiesForm.vue'
import setSecretsForm from '@/views/system/identityServer/components/setSecretsForm.vue'
import { ITabsConfig } from '@/components/AppTabs/type'
import { IProperty, ISecret } from '../components/types'
import { createApiResource, getApiResource, updateApiResource } from '@/http/apiResources'
import { ElMessage } from 'element-plus'
import { IUpdateApiResource } from '@/http/types/apiResources'

const props = defineProps({
  editId: {
    type: String,
    default: ''
  }
})
interface EmitsType {
  (e: 'update:editId', value: number | string): void
  (e: 'success'):void
}
const emit = defineEmits<EmitsType>()

const activeTabId = ref('apiResourceInfo')
const tabsSetting = computed<ITabsConfig[]>(() => {
  const setting = [{
    name: '信息',
    id: 'apiResourceInfo'
  },
  {
    name: '声明',
    id: 'claimTypes'
  }]
  if (props.editId) {
    setting.push({
      name: 'Secrets',
      id: 'setSecretsForm'
    })
    setting.push({
      name: '属性',
      id: 'setPropertiesForm'
    })
  }
  return setting
})

const apiResourceInfo = ref({
  name: '',
  displayName: '',
  description: '',
  allowedAccessTokenSigningAlgorithms: '',
  showInDiscoveryDocument: false,
  enabled: false,
  scope: ''
})
const claimTypeList = ref<string[]>([])
const properties = ref<IProperty[]>([])
const secrets = ref<ISecret[]>([])

const handleConfirm = async () => {
  if (props.editId) {
    const data:IUpdateApiResource = {
      displayName: apiResourceInfo.value.displayName,
      description: apiResourceInfo.value.description,
      showInDiscoveryDocument: apiResourceInfo.value.showInDiscoveryDocument,
      allowedAccessTokenSigningAlgorithms: apiResourceInfo.value.allowedAccessTokenSigningAlgorithms,
      userClaims: claimTypeList.value.map(item => {
        return {
          type: item
        }
      }),
      properties: properties.value,
      enabled: apiResourceInfo.value.enabled,
      scopes: [{
        scope: apiResourceInfo.value.scope
      }],
      secrets: secrets.value
    }
    await updateApiResource(props.editId, data)
  } else {
    const data = {
      name: apiResourceInfo.value.name,
      displayName: apiResourceInfo.value.displayName,
      description: apiResourceInfo.value.description,
      showInDiscoveryDocument: apiResourceInfo.value.showInDiscoveryDocument,
      allowedAccessTokenSigningAlgorithms: apiResourceInfo.value.allowedAccessTokenSigningAlgorithms,
      userClaims: claimTypeList.value.map(item => {
        return {
          type: item
        }
      })
    }
    await createApiResource(data)
  }
  ElMessage.success('保存成功')
  emit('success')
}

const handleDialogClosed = () => {
  activeTabId.value = 'apiResourceInfo'
  emit('update:editId', '')
}
const initData = async () => {
  const res = await getApiResource(props.editId)
  apiResourceInfo.value = {
    name: res.name,
    displayName: res.displayName,
    description: res.description,
    allowedAccessTokenSigningAlgorithms: res.allowedAccessTokenSigningAlgorithms,
    showInDiscoveryDocument: res.showInDiscoveryDocument,
    enabled: res.enabled,
    scope: res.scopes.map(item => item.scope)[0]
  }
  claimTypeList.value = res.userClaims.map(item => item.type)
  properties.value = res.properties.map(item => {
    return {
      key: item.key,
      value: item.value
    }
  })
  secrets.value = res.secrets
}
const handleDialogOpen = () => {
  apiResourceInfo.value = {
    name: '',
    displayName: '',
    description: '',
    allowedAccessTokenSigningAlgorithms: '',
    showInDiscoveryDocument: false,
    enabled: false,
    scope: ''
  }
  claimTypeList.value = []
  properties.value = []
  if (props.editId) {
    initData()
  }
}
</script>

<style scoped lang="scss">

</style>
